<template>
    <div>
        <h1>登录日志</h1>

        <!-- 添加弹窗 -->
<!--        <el-dialog title="新增" :visible.sync="dialogFormVisible">-->
<!--            <el-form :model="form" :rules="rules" ref="form">-->

<!--                <el-form-item label="通知名称" :label-width="formLabelWidth" prop="levelName">-->
<!--                    <el-input v-model="form.typeName" autocomplete="off"></el-input>-->
<!--                </el-form-item>-->




<!--            </el-form>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogFormVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="addRole">确 定</el-button>&lt;!&ndash;dialogFormVisible = false&ndash;&gt;-->
<!--            </div>-->
<!--        </el-dialog>-->


        <!-- 列表 -->
        <el-table :data="tableData" style="width:100%;margin: 0 auto" :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="410"
                    min-width="5%"
            >
            </el-table-column>

            <el-table-column
                    prop="ip"
                    label="登录Ip"
                    width="410">

<!--               <template slot-scope="{row}">-->
<!--                    <el-form v-if="row.edit">&ndash;&gt;-->
<!--                        <el-form-item>-->
<!--                            <el-input v-model="row.ip" size="small"/>-->
<!--                        </el-form-item>-->
<!--                   </el-form>&ndash;&gt;-->
<!--                    <span v-else>{{ row.ip}}</span>&ndash;&gt;-->
<!--                </template>&ndash;&gt;-->

           </el-table-column>

          <!--  <el-table-column
                    prop="sort"
                    label="排序"
                    sortable
                    width="180">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.sort" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{ row.sort }}</span>
                </template>
            </el-table-column>
-->
            <!--<el-table-column
                    prop="info"
                    label="说明"
                    width="180">
                <template slot-scope="{row}">
                    <el-form v-if="row.edit">
                        <el-form-item>
                            <el-input v-model="row.info" size="small"/>
                        </el-form-item>
                    </el-form>
                    <span v-else>{{row.info}}</span>
                </template>
            </el-table-column>-->

            <!--            <el-form-item label="录入人" :label-width="formLabelWidth" prop="inputId">-->
            <!--                <el-input v-model="form.inputId" autocomplete="off"></el-input>-->
            <!--            </el-form-item>-->
            <el-table-column prop="teacher.name" label="老师"  width="180">
            </el-table-column>
            <el-table-column prop="student.name" label="学生"  width="180">
            </el-table-column>

            <el-table-column
                    prop="loginTime"
                    label="登录时间"
                    sortable
                    width="410">
                <template slot-scope="scope">
                    <span>{{scope.row.loginTime.toLocaleString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')}}</span>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination
                background
                layout="prev, pager, next"
                :current-page="pageNum"
                :page-size="pageInfo.pageSize"
                :total="pageInfo.total"
                @current-change="handleLoginLogList"
        >
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "LoginLogView",
        data() {
            return {
                tableData: [],
                dialogTableVisible: false,
                dialogFormVisible: false,
                form: {

                    levelName: '',
                    sort: '0',
                    // info:'',
                    inputId: '1'

                },
                pageNum:1,
                pageInfo: [],
                formLabelWidth: '100px',
                //  rules: {
                //     typeName: [
                //         {required: true, message: '请输入等级名称', trigger: 'blur'}
                //     ]
                // },
            }
        },
        created() {
            this.handleLoginLogList();

        },
        methods: {
            handleLoginLogList(pageNum){
                //如果刷新页面pageNum为undefined，如果点击搜索按钮pageNum为事件对象，如果点击分页的页面才是一个数字
                if(typeof pageNum == "number"){
                    this.pageNum = pageNum;
                }
                else{
                    this.pageNum=1;
                }
                this.loading = true;
                this.$axios.post("/manage/loginLog/list",{},{params:{pageNum:this.pageNum}}).then(response=>{
                    console.log(response.data.data)
                    this.pageInfo = response.data.data;
                    this.tableData = response.data.data.list;

                });
            },

        }
    }
</script>

<style scoped>
    .el-table{
        margin: 0 auto;
    }
</style>